<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import {onBeforeUnmount, onMounted} from "vue";
import {Ion, Viewer, Terrain} from 'cesium'
import "cesium/Build/Cesium/Widgets/widgets.css";
import * as Cesium from "cesium";

// 服务器上托管 CesiumJS 静态文件的 URL。
window.CESIUM_BASE_URL = '/Cesium';
// 您的访问令牌可在以下位置找到：https://ion.cesium.com/tokens。
// 将“your_access_token”替换为您的铯离子访问令牌。
Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyNjJhZWE3NC1iYjY2LTQwZjAtODc0YS0zZTdlMjRmNTE5ZDEiLCJpZCI6MjA1NjY1LCJpYXQiOjE3MTE5MzExMzB9.efKdT634nrROZLOR-GmU5gvPmnlCDsiHDTkCYlU4SXA';
// Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.


/* 创建视图（查看器） */
async function createViewer() {
  const viewer = new Viewer('cesiumContainer', {
    animation: false, // 隐藏左下角动画部件
    timeline: false, // 隐藏底部时间轴部件
    fullscreenButton: false, // 隐藏右下角全屏按钮部件
    // creditDisplay: false, // 隐藏屏幕和灯箱中显示的制作人员名单。
    geocoder: false, // 隐藏右上角搜索按钮部件
    homeButton: false, // 隐藏右上角 Home 按钮部件
    sceneModePicker: false, // 隐藏右上角场景模式按钮部件
    // baseLayerPicker: false, // 隐藏右上角图层选择按钮部件
    navigationHelpButton: false, // 隐藏右上角帮助按钮部件
    vrButton: true, // 显示右下角 VRButton 按钮部件
    // selectionIndicator: false, // 隐藏点击要素之后显示的选择指示器
    // infoBox: false, // 隐藏点击要素之后显示的信息框
    // skyBox: false, // 天空盒，取消默认天空盒、太阳、月亮
    // skyAtmosphere: false, // 天空大气层，取消大气层效果 蔚蓝的天空，以及地球边缘的光芒
    // globe: false, // 要在场景中使用的地球仪。如果设置为 false ，则不会添加任何地球仪，并且默认情况下将隐藏天空大气层。
    // projectionPicker: true, // 显示右上角投影选择按钮部件
    terrain: Terrain.fromWorldTerrain({
      requestVertexNormals: true, // 请求其他照明信息
      requestWaterMask: true, // 请求每个磁贴的水掩码
    }),
    // 1.指定基础层
    baseLayer: Cesium.ImageryLayer.fromWorldImagery({
      // 使用必应地图航拍影像
      style: Cesium.IonWorldImageryStyle.AERIAL_WITH_LABELS,
    }),
    // 隐藏右上角基础图层选择器部件
    baseLayerPicker: false,
  });
  console.log('视图查看器：', viewer);
  // 隐藏底部 Cesium logo 与 attribution 标注信息部件
  viewer.bottomContainer.style.display = 'none'

  // 获取影像图层
  const layers = viewer.scene.imageryLayers
  // 2.添加另一个 Cesium 影像图层：Earth at Night（夜晚的地球）
  const blackMarble = Cesium.ImageryLayer.fromProviderAsync(
      Cesium.IonImageryProvider.fromAssetId(3812),
      {}
  );
  layers.add(blackMarble);
  // 由于它是最后添加的，并且覆盖了地球的整个范围，因此 Black Marble 图层覆盖了 Bing 图层
  // 将 Black Marble 移动到底部 - 可以使用 raise、raiseToTop、lower 和 lowerToBottom 对层重新排序。请参阅 ImageryLayerCollection。
  // layers.lower(blackMarble);
  // 设置透明度
  blackMarble.alpha = 0.5; // 0.0 是透明的。 1.0 是不透明的
  // 增加灯的亮度
  blackMarble.brightness = 2.0; // > 1.0 可提高亮度。 < 1.0 降低

  // 3.添加第三个图层，用于在特定范围内绘制单个图像
  const cesiumLogo = Cesium.ImageryLayer.fromProviderAsync(
      Cesium.SingleTileImageryProvider.fromUrl('src/assets/avatar.jpg', {
            // 指定单个图像的矩形区域 - 限制显示的区域，否则覆盖整个地球
            rectangle: Cesium.Rectangle.fromDegrees(
                -75.0,
                28.0,
                -67.0,
                29.75
            ),
          }
      ),
      {}
  );
  layers.add(cesiumLogo);
  // 所有影像提供商 - https://cesium.com/learn/cesiumjs/ref-doc/?classFilter=ImageryProvider
  return viewer;
}

onMounted(async () => {
  await createViewer();
})

onBeforeUnmount(() => {
})
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
